import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
import Icon from "react-native-vector-icons/AntDesign";

const GAP = 12;
const RADIUS = 8;
const BLOCK_PADDING = 12;

const styles = StyleSheet.create({
  container: {
    paddingTop: 36,
    backgroundColor: "#eee",
    flex: 1
  },
  bottom: {
    padding: 12,
    paddingBottom: 24,
    backgroundColor: "white",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around"
  },
  bottomItem: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    gap: 4
  },
  bottomItemText: {
    fontSize: 12,
    color: "gray"
  },
  bottomItemIconBg: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "#eee",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  block: {
    marginTop: GAP,
    marginLeft: GAP,
    borderTopLeftRadius: RADIUS,
    borderBottomLeftRadius: RADIUS,
    padding: BLOCK_PADDING,
    backgroundColor: "white"
  },
  blockItem: {
    paddingTop: BLOCK_PADDING,
    paddingBottom: BLOCK_PADDING,
    paddingLeft: BLOCK_PADDING,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: GAP
  },
  blockItemText: {
    fontSize: 16,
  }
});

type BlockItemType = {
  title: string,
  icon: string,
  to?: string | null | undefined
}

function BlockItem({ title, icon, to }: BlockItemType) {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  return (
    <Pressable onPress={() => to && navigation.navigate(to)}>
      <View style={styles.blockItem}>
        <Icon name={icon} size={20} color="black" />
        <Text style={styles.blockItemText}>{title}</Text>
      </View>
    </Pressable>
  );
}

type BlockProps = {
  items: BlockItemType[]
}

function Block({ items }: BlockProps) {
  return (
    <View style={styles.block}>
      {items.map((item) => (
        <BlockItem key={item.title} {...item} />
      ))}
    </View>
  );
}

function BottomItem({ title, icon, to }: { title: string, icon: string, to: string }) {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  return (
    <Pressable onPress={() => navigation.navigate(to)}>
      <View style={styles.bottomItem}>
        <View style={styles.bottomItemIconBg}>
          <Icon name={icon} size={20} color="black" />
        </View>
        <Text style={styles.bottomItemText}>{title}</Text>
      </View>
    </Pressable>
  );
}

function Bottom() {
  return (
    <View style={styles.bottom}>
      <BottomItem title="设置" icon="setting" to="/settings" />
      <BottomItem title="青少年模式" icon="hearto" to="/youth-mode" />
      <BottomItem title="联系客服" icon="customerservice" to="/customer-service" />
    </View>
  );
}

export default function DrawerContent() {
  const items0 = [
    { title: "游戏角色", icon: "team" },
    { title: "我的收藏", icon: "staro" },
    { title: "浏览历史", icon: "clockcircleo" },
    { title: "个性装扮", icon: "skin" }
  ];
  const items1 = [
    { title: "教程", icon: "team", to: "/tutorials" },
  ];
  return (
    <View style={styles.container}>
      <ScrollView>
        <Block items={items0} />
        <Block items={items1} />
      </ScrollView>
      <Bottom />
    </View>
  );
}
